<template lang="html">
  <div id="pageBox" class="pd20">
    <div class="header">
      <div class="top">
        <div class="day">
          <p class="num">{{ learnInfo.learnedTotalDay }}天</p>
          <p class="note">已学习</p>
        </div>
        <div class="imgBox">
          <img :src="payUserInfo.coverImg" alt="">
        </div>
        <div class="day">
          <p class="num">{{ learnInfo.learnedTotalDay }}天</p>
          <p class="note">已打卡</p>
        </div>
      </div>
      <div class="name">
        {{ payUserInfo.userName }}
      </div>
      <div class="headerNote">
        每天成长一点，遇见更美好的自己
      </div>
    </div>
    <div>
      <Calendar
        @changeMonth="changeDate"
        :markDate="markDate"
        agoDayHide="1514937600"
        futureDayHide="1525104000"
        :sundayStart="true"
      />
    </div>
    <div class="dateBox">
      <div class="dateContent">
        <div class="dateNote cl">
          <div class="ka">
            <span class="yuan y"></span>
            已打卡
          </div>
        </div>
        <!-- <div class="pNum">
          今日已有 <span>417700</span> 人参与打卡
        </div> -->
        <div class="btn" v-if="!dayInfo" @click="clockFun">
          立即打卡
        </div>
        <div class="btn y" v-if="dayInfo && dayInfo.id">
          打卡成功
        </div>
      </div>
      <div class="dateNote">
        <div class="noteTitle cl">
          <span class="icon fl"></span>
          <span class="text fl">打卡须知</span>
        </div>
        <div class="noteItem" v-html="ruleHtml"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
import { clockIn, dayClock, monthClock, getClockInRule } from '@/api/pay'
export default {
  components: {
    Calendar
  },
  data(){
    return {
      weekBox:["一","二","三","四","五","六","日"],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate(),
      markDate: [],
      dayInfo: {},
      // isClock:false,
      ruleHtml: '',
      learnInfo: {},
      payUserInfo: {},
    }
  },
  created(){
    try {
      this.learnInfo = JSON.parse(sessionStorage.getItem('learnInfo'))
    } catch (error) {}
    try {
      this.payUserInfo = JSON.parse(sessionStorage.getItem('payUserInfo'))
    } catch (error) {}
    this.getDayClock()
    this.getMonthClock()
    this.getClockInRule()
  },
  methods:{
    clockFun(){
      clockIn().then( res=> {
        // this.isClock = true;
        this.getDayClock()
      })
    },
    getDayClock() {
      const { year, month, day } = this
      dayClock({ year, month, day }).then(res=> {
        this.dayInfo = res.data
      })
    },
    getMonthClock() {
      const { year, month } = this
      monthClock({ year, month }).then(res=> {
        const arr1 = []
        const list = res.page.list
        for (let i = 0; i < list.length; i++) {
          const e = list[i];
          const timeStr = `${e.year}/${e.month}/${e.day}`
          arr1.push(timeStr)
        }
        if (month > 1) {
          monthClock({ year, month: month - 1 }).then(res=> {
            const arr2 = []
            const list = res.page.list
            for (let i = 0; i < list.length; i++) {
              const e = list[i];
              const timeStr = `${e.year}/${e.month}/${e.day}`
              arr2.push(timeStr)
            }
            this.markDate = this.markDate.concat(arr1, arr2)
          })
        } else {
          this.markDate = arr1
        }
      })
      
    },
    getClockInRule() { 
      getClockInRule().then(res=> {
        this.ruleHtml = res.tag
      })
    },
    changeDate(data) {
      if (data) {
        const monthTime = new Date(data)
        const year = monthTime.getFullYear()

        this.getMonthClock()
      }
    },
  },
}
</script>

<style lang="less" scoped>
  #pageBox{
    .header{
      padding-top:0.3rem;
      padding-bottom:0.1rem;
      border-bottom:1px dashed #dedede;
      .top{
        display: flex;
        .day{
          flex:1;
          text-align: center;
          margin-top:0.2rem;
          p{
            line-height: 0.2rem;
          }
          p.num{
            font-size:0.18rem;
          }
          p.note{
            font-size:0.12rem;
            color:#999;
          }
        }
        .imgBox{
          width:0.8rem;
          height:0.8rem;
          border-radius: 50%;
          overflwo:hidden;
          background:#999;
          img{
            width:100%;
          }
        }
      }
      .name{
        text-align: center;
        font-size:0.2rem;
        margin:0.1rem 0 0.06rem 0;
      }
      .headerNote{
        text-align: center;
        font-size:0.14rem;
      }
    }
    .dateBox{
      .dateYears{
        text-align: center;
        margin:0.16rem 0 0.2rem;
        .jt{
          display: inline-block;
          width:0.26rem;
          height:0.26rem;
          line-height: 0.26rem;
          background:#ededed;
          border-radius: 50%;
          font-size:0.2rem;
          &.ljt{
            transform:rotate(180deg);
          }
        }
        .years{
          font-size:0.2rem;
          margin:0 0.1rem;
        }
      }
      .dateContent{
        .weekBox{
          .weekList{
            display: flex;
            .weekItem{
              flex:1;
              text-align: center;
            }
          }
        }
        .dayBox{
          margin-top:0.14rem;
          .rowItem{
            display: flex;
            .dayItem{
              flex:1;
              text-align: center;
              .dayBg{
                width:0.36rem;
                height:0.36rem;
                margin:0 auto;
                border-radius: 50%;
                &.today{
                  background:#31c27c;
                  color:#fff;
                }
                .yuan{
                  width:0.06rem;
                  height:0.06rem;
                  border-radius: 50%;
                  background:#999;
                  margin:0 auto;
                  &.y{
                    background:#31c27c;
                  }
                }
                .todayText{
                  font-size:0.12rem;
                  margin-top:-0.06rem;
                  transform: scale(0.8);
                }
              }
            }
          }
        }
        .dateNote{
          margin-top:0.2rem;
          padding-left:0.02rem;
          .ka{
            font-size:0.12rem;
            line-height: 0.12rem;
            float:left;
            margin-right:0.1rem;
            transform: scale(0.8);
            .yuan{
              display: inline-block;
              width:0.06rem;
              height:0.06rem;
              border-radius: 50%;
              &.y{
                background:#31c27c;
              }
              &.n{
                background:#999;
              }
            }
          }
        }
        .pNum{
          margin-top:0.2rem;
          text-align:center;
          font-size:0.12rem;
          color:#666;
          span{
            color:red;
          }
        }
        .btn{
          width:90%;
          height:0.48rem;
          background:#31c27c;
          line-height: 0.48rem;
          text-align: center;
          color:#fff;
          border-radius: 0.24rem;
          margin:0.3rem auto;
          box-shadow: 0 0.04rem 0.08rem 0.03rem #c3c3c3;
          &.y{
            background:#FFB90F;
          }
        }
      }
      .dateNote{
        .noteTitle{
          height:0.3rem;
          line-height: 0.32rem;
          overflow:hidden;
          margin-bottom:0.1rem;
          .icon{
            display: inline-block;
            width:0.04rem;
            height:0.2rem;
            margin-top:0.05rem;
            background:#31c27c;
            margin-right:0.1rem;
          }
          .text{
            display: inline-block;
            font-size:0.18rem;
          }
        }
        .noteItem{
          display: flex;
          font-size:0.14rem;
          color:#666;
          margin-bottom:0.06rem;
          .indexNum{
            width:0.2rem;
          }
          .text{
            flex:1;
            line-height: 0.2rem;
          }
        }
      }
    }
  }
</style>
<style lang="less">
#pageBox{
  .wh_content_all{
    background: transparent;
  }
  .wh_top_changge{
    li{
      color: #333;
    }
    .wh_jiantou1,.wh_jiantou2 {
      border-color: #333;
    }
  }
  .wh_content_item{
    .wh_isToday{
      background: #31c27c;
      color: #fff;
      &.wh_isMark{
        background: #FFB90F;
        color: #fff;
      }
    }
    .wh_isMark{
      background: transparent;
      position: relative;
      color: #333;
      &::after{
        content: " ";
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #31c27c;
        bottom: 2px;
      }
    }
  }
  .wh_content_item{
    color: #333;
  }
  
}

</style>

